import { Box } from "@mui/system"
import React, { useEffect, useRef, useState } from "react"
import Player, { PlayStatus } from "./components/Palyer"
import TextParser from "@/TextParser/core"
import { useAplayer } from "@/hooks/useAplayer"
import avatar from "@/../assets/avatar.jpg"
import { useRequest } from "ahooks"
import { getAllMusic, musicList } from "@/services"
export default () => {
  const aplayerRoot = useRef()
  const [currentItem, setCurrentItem] = useState()
  const [status, setStatus] = useState<PlayStatus>()
  const [Aplayer] = useAplayer({
    container: aplayerRoot,
    listFolded: true,
    lrcType: 1,
    listMaxHeight: 200,
  })
  const { data } = useRequest(() => getAllMusic(), {})

  useEffect(() => {
    Aplayer?.on("play", () => {
      setStatus(PlayStatus.PLAY)
      setCurrentItem(Aplayer.list?.audios?.[Aplayer.list?.index || 0])
    })
    Aplayer?.on("ended", () => {
      setStatus(PlayStatus.ENDED)
    })
    Aplayer?.on("pause", () => {
      setStatus(PlayStatus.PAUSE)
    })
  }, [Aplayer])
  useEffect(() => {
    if (data?.data?.length) {
      Aplayer?.list.add(
        data?.data?.map((item: any) => {
          return {
            ...item,
            url: window.alignConfig.blogSourceMinio + "/musics/" + item.url,
            cover:
              window.alignConfig.blogSourceMinio + "/musiccovers/" + item.cover,
            artist: item.singer,
          }
        }),
      )
    }
  }, [data?.data])
  return (
    <Box>
      <Player
        sx={{ mb: 4 }}
        onToggle={() => {
          Aplayer.toggle()
        }}
        value={currentItem}
        status={status}
      ></Player>
      <Box ref={aplayerRoot}></Box>
    </Box>
  )
}
